<!--
 * @Descripttion: 
 * @version: 
 * @Author: lichangbo
 * @Date: 2021-01-07 22:20:09
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-01-07 22:58:22
-->
<template>
    <div class="page" >
        <h3 class="page_title" >组件篇</h3>
        <hr/>
        <test-compot :list="list" @click-shop="clickShop" @click-del="clickDel">
            <div>
                我传给普通插槽
            </div>
            <template #content >
                <ul>
                    <li v-for="item in 3" :key="item" @click="slotFn(item)" >
                        {{item}}
                    </li>
                </ul>
            </template>
            <!-- 写法：#sltName="{ sltNameList }"，#sltName => 标记名字，{ sltNameList } 从 slotProps 中结构出来 -->
            <template #sltName="{ sltNameList }" >
                <ul>
                    <li v-for="ite in sltNameList" :key="ite" >
                        {{ite}}
                    </li>
                </ul>
            </template>
        </test-compot>
        <!-- 组件上使用 v-model -->
        <h3 class="the_title" >4、组件上使用 v-model</h3>
        <p>
            编写一个输入框的双向绑定
        </p>
        <l-input v-model:placeholder ="placeholder" ></l-input>
        <p>
            输入框中的值：{{placeholder}}
        </p>
    </div>
    <div style="height:20vh;text-align: center;height: 20vh;" >
        模板之外也可以了哦
    </div>
</template>

<script lang='ts' >
    import { defineComponent,reactive,isReactive, ref,toRefs } from 'vue';
    import TestCompot from '@/components/TestCompot.vue';
    import lInput from './components/linput.vue';

    export default defineComponent({
        name:'Compont',
        components:{
            TestCompot,
            lInput
        },
        setup() {

            let data = reactive<AjaxDataModel.Data>({ list:[] })

            const placeholder = ref< string | number >('随便填写')

            for( let i = 0; i < 20; i++ ){
                data.list.push({
                    id: i,
                    name: `商品${i}`,
                    price: i 
                })
            }
            
            // setup 中
            const clickShop = (item: AjaxDataModel.DataKey): void => {
                alert(JSON.stringify(item))
               
            }

            const clickDel = (item: AjaxDataModel.DataKey): void => {
              data.list = data.list.filter((ite) => ite.id != item.id)
            }
          
            // 将 reactive 定义的复杂类型，转换为 ref 响应式对象
            const  { list }  = toRefs(data)

            return {
                list,
                clickShop,
                clickDel,
                placeholder
            }
        },
        methods:{
            // v2 模式
            // clickShop(item: AjaxDataModel.DataKey): void {
            //     alert(JSON.stringify(item))
            // },
            slotFn(item: number): void {
                console.log(item)
            },
            // clickDel(item: AjaxDataModel.DataKey): void {
            //     this.list = this.list.filter((ite) => ite.id != item.id)
            // }
        }
    }) 
</script>

<style lang="less" scoped>

</style>